<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="lib/ol.css" rel="stylesheet">
    <script src="lib/ol.js"></script>
    <style>
        #map1{
            float: left;
        }
        #map2{
            float: right;
        }
        .map{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div>

<div id="map1" class="map" style="width: 49.9%;height: 700px" ></div>

<div id="map2" class="map" style="width: 49.9%;height: 700px"></div>
</div>
<script>
    var view=new ol.View({
        center:[0,0],
        zoom:4
    });
    new ol.Map({
        layers:[
            new ol.layer.Tile({
                source:new ol.source.OSM()
            })
        ],
        view:view,
        target:'map1'
    });
    new ol.Map({
        layers:[
            new ol.layer.Tile({
                source:new ol.source.OSM()
            })
        ],
        view:view,
        target:'map2'
    });
</script>

</body>
</html>